<template>
  <div ref="dom" class="charts chart-line"></div>
</template>

<script>
import echarts from 'echarts'
import echartsLiquidfill from 'echarts-liquidfill'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartTemperature',
  props: {
    text: String,
    temperature: Number
  },
   watch: {
    'temperature':function(newVal,oldVal){
      console.log(newVal)
      this.changeChart()
    }
  },
  mounted () {
   this.changeChart()
  },
  methods:{
    changeChart(){
       this.$nextTick(() => {
        // console.log(this.temperature)
        let option = {
          title: {
            text: this.text,
            show: true,
            x: 'center'
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              restore: {show: false},
              saveAsImage: {show: false}
            }
          },
          series: [{
            name: '当前数据值',
            type: 'liquidFill',
            radius: '70%',
            data: [{
              value: this.temperature*0.01,
              itemStyle: {
                normal: {
                  color: '#fd4d49'
                }
              }
            }],
            amplitude: 8,
            shape: 'path://M324.234,516.886c0-41.643,0-252.383,0-258.626c0-14.688-11.906-26.594-26.593-26.594c-14.688,0-26.595,11.906-26.595,26.594c0,5.271,0,216.887,0,258.625c-13.383,8.71-22.24,23.791-22.24,40.949c0,26.97,21.863,48.834,48.834,48.834c26.969,0,48.834-21.864,48.834-48.834C346.475,540.676,337.617,525.596,324.234,516.886z',
            backgroundStyle: {
              color: 'none',
              borderColor: '#000',
              borderWidth: 2
            },
            itemStyle: {
              normal: {
                opacity: 1,
                shadowBlur: 0
              }
            },
            outline: {
              show: false
            },
            label: {
              normal: {
                position: ['85%', '40%'],
                formatter: this.temperature + '℃',
                textStyle: {
                  fontSize: 24
                }
              }
            }
          }]
        }
        let dom = echarts.init(this.$refs.dom, 'tdTheme')
        dom.setOption(option)
      })
    }
  }
}
</script>

<style lang="less">

</style>
